.steps {
    position: relative;
    counter-reset: step;
    display: flex;


    /*创建步骤数字计数器*/
    :global {

        /*步骤描述*/
        li {
            list-style-type: none;
            font-size: 14px;
            text-align: center;
            width: 15%;
            position: relative;
            float: left;
        }
        .title{
            width:100px;
            height:30px;
            background:rgba(255,255,255,1);
            border-radius:15px;
            border:1px solid rgba(201,201,201,1);
            margin: auto;
            line-height: 28px;
            z-index: 1;
            position: relative;
            font-size:14px;
            color: #C9C9C9;
            font-family:PingFangSC-Medium,PingFang SC;
            font-weight:bold;
            text-align: center;
            display: flex;
        }
        .index{
            width:16px;
            height:16px;
            background:rgba(201,201,201,1);
            border:0px solid rgba(255,255,255,1);
            color: #fff;
            line-height: 16px;
            border-radius: 16px;
            font-size: 14px;
            margin: 6px 6px 0 20px;
        }

        /*步骤数字*/
        // li:before {
        //     display: block;
        //     content: counter(step);
        //     /*设定计数器内容*/
        //     counter-increment: step;
        //     /*计数器值递增*/
        //     width: 32px;
        //     height: 32px;
        //     background-color: #019875;
        //     line-height: 32px;
        //     border-radius: 32px;
        //     font-size: 16px;
        //     color: #fff;
        //     text-align: center;
        //     font-weight: 700;
        //     margin: 0 auto 8px auto;
        // }

        /*连接线*/
        li~li:after {
            content: "";
            width: 100%;
            height: 2px;
            border-top: 2px dotted;
            border-color: #0975E1;
            position: absolute;
            left: -50%;
            top: 15px;
            z-index: 0;
            /*放置在数字后面*/
        }

        /*将当前/完成步骤之前的数字及连接线变绿*/
        li.active .title,
        li.before .title,
        li.active:after {
            color: #0975E1;
            border-color: #0975E1;

        }
        li.active .title{
            .index{
                background-color: #0975E1;
            }
        }
        li.before .title{
            .index{
                background-color: #0975E1;
            }
        }

        /*将当前/完成步骤之后的数字及连接线变灰*/
        li.active~li .title,
        li.active~li:after {
            border-color: #C9C9C9;
        }
    }
}